<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>订单详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/pravate/common.css" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js" ></script>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>
	<style>
		#orderInfo{
			background: #fff;
			border-radius: 5px;
			margin: 10px;
			padding: 10px;
		}
		#orderInfo h5{
			padding-bottom: 10px;
			border-bottom: 1px solid #e7e7e7;
		}
		.other{
			display: flex;
			font-size: 14px;
			color: #333333;
			line-height: 22px;
			padding-top: 10px;
			border-top: 1px solid #e7e7e7;
		}
		.orderType{
			flex: 1;
			text-align: center;
		}
		.price{
			display: inline-block;
		}
		.price span{
			font-size: 22px;
		}
		.orderInfo{
			padding: 10px 0;
			display: flex;
		}
		.orderInfo img{
			width: 45px;
			height: 45px;
			border-radius: 22.5px;
			margin-right: 10px;
		}
		#orderInfo .OT h5{
			font-size: 12px;
			color: #333333;
			border: 0;
			line-height: 12px;
		}
		.time{
			margin: 0;
			margin-top: 5px;
		}
		.startTime, .endTime{
			padding: 0 20px 0 5px;
			color: #FF4400;
			font-size: 12px;
		}
		/*订单号 */
		.orderId{
			font-size: 12px;
			color: #999999;
			line-height: 12px;
			padding: 10px;
		}
		.orderId span{
			color: #333;
			float: right;
		}
		/*订单信息*/
		#otherInfo{
			padding: 0;
			margin: 0;
		}
		#otherInfo li{
			font-size: 14px;
			color: #999999;
			line-height: 14px;
			padding: 12px 10px;
			background: #fff;
			border-bottom: 1px solid #e7e7e7;
		}
		#otherInfo li span{
			display: inline-block;
			color: #333;
			float: right;
		}
		.footer{
			padding: 15px 30px 10px;
			font-size: 0;
		}
		.footer .mui-btn{
			font-size: 16px;
			color: #FFFFFF;
			line-height: 16px;
			width: 47%;
			border: 0;
			padding: 15px 0;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title title">订单详情</h1>
		</header>
		<div class="mui-content">
			<script type="text/template" id="model">
				<div id="orderInfo">
					<h5>
						{{if status=="success"&&data.hotelName}}
							{{data.hotelName}}
						{{else}}
						       天择可付
						{{/if}}
					</h5>
					<div class="info">
						<div class="orderInfo">
							<img src="../images/qq.png" />
							<div class="OT">
								<h5>房型：
									{{if status=="success"&&data.roomClassName}}
										{{data.roomClassName}}
									{{else}}
									        标准间
									{{/if}}
								</h5>
								<p class="time">入住<span class="startTime">
									{{if status=="success"&&data.start_time}}
										{{data.start_time}}
									{{else}}
									    2018-06-01
									{{/if}}
								</span>离店<span class="endTime">
									{{if status=="success"&&data.end_time}}
										{{data.end_time}}
									{{else}}
									    2018-06-01
									{{/if}}
								</span>
								<span>
									{{if status=="success"&&data.newDays}}
										{{data.newDays}}
									{{else}}
									    0
									{{/if}}
									晚
								</span></p>
							</div>
						</div>
					</div>
					<div class="other">
						<div class="orderType">
							{{if status=="success"&&data.pay_type}}
								{{data.pay_type}}
							{{else}}
							    
							{{/if}}
						</div>
						<div class="price">总计：￥<span>
							{{if status=="success"&&data.total}}
								{{data.total}}
							{{else}}
							    0.00
							{{/if}}
						</span></div>
					</div>
				</div>
				<div class="orderId">
					订单号
					<span>
						{{if status=="success"&&data.order_sn}}
							{{data.order_sn}}
						{{else}}
						    000000000000
						{{/if}}
					</span>
				</div>
				<ul id="otherInfo">
					<li>订单状态
						<span>
							{{if status=="success"&&data.order_type_z}}
								{{data.order_type_z}}
							{{else}}
							        已取消
							{{/if}}
						</span>
					</li>
					<li>到店时间
						<span>
							{{if status=="success"&&data.in_time}}
								{{data.in_time}}
							{{else}}
							        未确认到店
							{{/if}}
						</span>
					</li>
					<li>入住人
						<span>
							{{if status=="success"&&data.user_cname}}
								{{data.user_cname}}
							{{else}}
							      天择可付
							{{/if}}
						</span>
					</li>
					<li>联系电话
						<span>
							{{if status=="success"&&data.user_tel}}
								{{data.user_tel}}
							{{else}}
							    00000000000
							{{/if}}
						</span>
					</li>
					<li>下单时间
						<span>
							{{if status=="success"&&data.created_at}}
								{{data.created_at}}
							{{else}}
							    00000000000
							{{/if}}
						</span>
					</li>
					<li>备注信息
						<span>
							{{if status=="success"&&data.remarks}}
								{{data.remarks}}
							{{else}}
							    无
							{{/if}}
						</span> 
					</li>
				</ul>
				<div class="footer">
					{{if status=="success"&&data.isReceived&&data.isReceived==2}}
						<button type="button" class="mui-btn orderAction" data-sign='false' style="background: #c0c0c0;margin-right: 6%;">取消接单</button>
						<button type="button" class="mui-btn orderAction mui-btn-primary" data-sign='true'>确认接单</button>
					{{else if data.status==2}}
					    <button type="button" class="mui-btn orderConfime" data-sign='false' style="background: #c0c0c0;margin-right: 6%;">取消并退款</button>
					    <button type="button" class="mui-btn orderConfime mui-btn-primary" data-sign='true'>确认到店</button>
					{{else}}
					
					{{/if}}
				</div>
			</script>
		</div>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script>
			mui.plusReady(function(){
				var data={
					data:[]
				}
				var page=1;
				var num=3;
				ws = plus.webview.currentWebview();
				require(weburl + BookingOrderDetail, "json", "post", {
					token: localStorage.getItem("token"),
					order_sn: ws.orderId
				}, function(response) {
					if(response.status==='success'){
						var str = template("model",response);
						$(".mui-content").html(str);
					}else{
						var str = template("model",data);
						$(".mui-content").html(str);
						mui.alert(response.msg,' ','关闭',function(){},"div");
					}
				}, function() { 
					console.log('err'); 
					var str = template("model",data);
					$(".mui-content").html(str);
					mui.alert('网络错误，请稍后再试',' ','关闭',function(){},"div");
				})
				//接单操作
				mui('body').on('tap','.orderAction',function(){
					var that=$(this);
					mui.confirm('是否'+that.html(),' ',['确认','取消'],function(e){
						if(e.index==0){
							require(weburl + orderAction, "json", "post", {
								token: localStorage.getItem("token"),
								order_sn: ws.orderId,
								operating: that.attr('data-sign')
							}, function(response) {
								console.log(JSON.stringify(response));
								if(response.status==='success'){
									mui.alert('操作成功',' ','关闭',function(){
										window.location.reload();
									},"div");
								}else{
									mui.alert(response.msg,' ','关闭',function(){},"div");
								}
							}, function() {
								mui.alert('网络错误，请稍后再试',' ','关闭',function(){},"div");
							})
						}
					},'div');
				})
				//到店操作
				mui('body').on('tap','.orderConfime',function(){
					var that=$(this);
					mui.confirm('是否'+that.html(),' ',['确认','取消'],function(e){
						if(e.index==0){
							require(weburl + orderConfire, "json", "post", {
								token: localStorage.getItem("token"),
								order_sn: ws.orderId,
								operating: that.attr('data-sign')
							}, function(response) {
								console.log(JSON.stringify(response));
								if(response.status==='success'){
									mui.alert('操作成功',' ','关闭',function(){
										window.location.reload();
									},"div");
								}else{
									mui.alert(response.msg,' ','关闭',function(){},"div");
								}
							}, function() {
								mui.alert('网络错误，请稍后再试',' ','关闭',function(){},"div");
							})
						}
					},'div');
				})
			})
		</script>
	</body>

</html>